<template>
  <div>
    <el-card style="font-size: 20px; font-family: 'Helvetica Nee',serif; margin-top: 0;">
      <b>控制台</b>
      <p style="font-size: 15px">用于展示当前系统中的统计数据、统计报表及相关重要数据</p>
    </el-card>
    <el-card>
      <el-select v-model="community" clearable placeholder="根据小区查询">
        <el-option
            v-for="item in communityList"
            :key="item.code"
            :label="item.name"
            :value="item.code">
        </el-option>
      </el-select>
      <hr>

      <el-row :gutter="10" style="margin-bottom: 10px">
        <el-col :span="6">
          <el-card>
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="5">
                  <Icon type="ios-film"  size="60" color="#008B8B"/>
                </el-col>
                <el-col :span="18">
                  <h2>{{ buildingCount }}</h2>             <!-- 获取总楼栋数-->
                  <h3>总楼栋数</h3>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card>
            <div class="grid-content bg-purple-light">
              <el-row>
                <el-col :span="5">
                  <Icon type="md-home" size="60" color="#ed4014"/>
                </el-col>
                <el-col :span="18">
                  <h2>{{ householdsCount }}</h2>             <!-- 获取总户数-->
                  <h3>总户数</h3>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card>
            <div class="grid-content bg-purple">
              <el-row>
                <el-col :span="5">
                  <i class="el-icon-s-custom" style="font-size: 60px;color: #2a598a"></i>
                </el-col>
                <el-col :span="18">
                  <h2>{{ peopleCount }}</h2>             <!-- 获取总人数-->
                  <h3>总人数</h3>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>

        <el-col :span="6">
          <el-card>
            <div class="grid-content bg-purple-light">
              <el-row>
                <el-col :span="5">
                  <Icon type="md-car" size="60" color="#A0522D"/>
                </el-col>
                <el-col :span="18">
                  <h2>{{ parkingCount }}</h2>             <!-- 停车位数量-->
                  <h3>停车位数量</h3>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <div id="mychart" style="float: left; width: 100%; height: 400px; margin-top: 30px;"></div>
      <div id="mychart1" style="float: left; width: 50%; height: 400px; margin-top: 30px;"></div>
      <div id="mychart2" style="float: left; width: 50%; height: 400px; margin-top: 30px;"></div>

      <el-row :gutter="10" >
        <el-col :span="8" style="margin-top: 10px">
          <hr>
          <el-card>
            <h3 align="center">最新活动信息</h3>
            <el-table :data="tableDataActivity" stripe style="width: 100%" >
              <el-table-column prop="title" label="标题" width="105" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="location" label="活动地址" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="company" label="举办单位" width="190" :show-overflow-tooltip="true"></el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="8" style="margin-top: 10px">
          <hr>
          <el-card>
            <h3 align="center">最新保修信息</h3>
            <el-table :data="tableDataRepairs" stripe style="width: 100%" >
              <el-table-column prop="repairName" label="维修人员" width="180" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="equipment" label="设备名称" width="180" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="state" label="状态">
                <template slot-scope="scope">
                  <span>{{ stateStr[scope.row.state] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>

        <el-col :span="8" style="margin-top: 10px">
          <hr>
          <el-card>
            <h3 align="center">最新投诉信息</h3>
            <el-table :data="tableDataComplains" stripe style="width: 100%" >
              <el-table-column prop="name" label="投诉名称" width="180" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="describes" label="投诉详情" width="180" :show-overflow-tooltip="true"></el-table-column>
              <el-table-column prop="anonymous" label="匿名状态">
                <template slot-scope="scope">
                  <span>{{ anonymousStr[scope.row.anonymous] }}</span>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "dashboard",
  data() {
    return {
      community:"",
      anonymousStr:["未匿名","匿名"],
      stateStr: ["未受理", "受理中", "受理成功"],
      buildingCount: "",
      householdsCount: "",
      peopleCount: "",
      parkingCount: "",
      communityList: [],
      responseData: [],
      xData: [], //横坐标数据
      amountTotal: [],
      amountPaid: [],
      xData1: [], //横坐标数据
      amountTotal1: [],
      amountPaid1: [],
      yData: [], //纵坐标数据，与横坐标对应
      tableDataActivity: [],
      tableDataRepairs: [],
      tableDataComplains: [],
      chargeAmountPaid:[],
      chargeAmountTotal:[],
      projectName:[],
    };
  },
  methods: {
    //加载投诉信息
    loadChargeDetails() {
      this.$Spin.show();
      let url = this.host + "/chargeDetails/listDashboard";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          for (let item of response.data.data) {
            this.projectName.push(item.projectName);
            this.chargeAmountPaid.push(item.amountPaid);
            this.chargeAmountTotal.push(Math.round(item.amountTotal));
          }
          this.initEcharts1();
          this.initEcharts2();
          this.$Spin.hide();
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    //加载投诉信息
    loadComplaint() {      
      let url = this.host + "/complains/listDashboard";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          for (let item of response.data.data) {
            this.tableDataComplains.push(item);
          }
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    //加载保修信息
    loadRepair() {
      let url = this.host + "/repairs/listDashboard";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          for (let item of response.data.data) {
            this.tableDataRepairs.push(item);
          }
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    //加载活动信息，标题，活动地点，举办单位
    loadActivity() {
      let url = this.host + "/activities/listDashboard";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          for (let item of response.data.data) {
            this.tableDataActivity.push(item);
          }
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载所有停车位数量
    loadParkingCount() {
      let url = this.host + "/parking/countParking";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.parkingCount = response.data.data;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载总人数
    loadPeopleCount() {
      let url = this.host + "/owners/countPeople";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.peopleCount = response.data.data;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载总户数
    loadHouseholdsCount() {
      let url = this.host + "/building/countHouseholds";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.householdsCount = response.data.data;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载所有楼栋数量
    loadBuildingCount() {
      let url = this.host + "/building/countBuilding";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.buildingCount = response.data.data;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载所有小区数据
    loadCommunityList() {
      let url = this.host + "/community/list";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.communityList = response.data.data.records;
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    // 加载收费金额数据
    loadAmountList() {
      let url = this.host + "/chargeDetails/listAmount";
      this.axios.get(url).then((response) => {
        if (response.data.statusCode == 2000) {
          this.responseData = response.data.data;
          for (let item of response.data.data) {
            this.xData.push(item.month);
            this.amountPaid.push(item.amountPaid);
            this.amountTotal.push(item.amountTotal);
          }
          this.xData = this.xData.filter(item => item !== undefined);
          this.amountPaid = this.amountPaid.filter(item => item !== undefined);
          this.amountTotal = this.amountTotal.filter(item => item !== undefined);
          this.initEcharts();
        } else {
          this.$message.error("加载数据出错了！");
        }
      });
    },
    selectByCommunity(community) {
      console.log(community);
    },
    initEcharts() {
      const option = {
        title: {
          text: '每月收费统计',
          subtext: '(2022-04至2023-04)',
          left: 'center',  // 标题水平居中
          top: 'top',      // 标题与容器顶部对齐
          textStyle: {
            color: '#333',   // 文本颜色
            fontWeight: 'normal',  // 文本粗细
            fontSize: 18     // 文本字号
          },
        },
        tooltip: {
          item: 'axis'
        },
        legend: {
          data: ['实收金额', '应收金额'],
          right: '70px',
          top: '20px'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xData
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '实收金额',
            stack: 'Total',
            type: 'line',
            data: this.amountPaid,         //传入实收金额
          },
          {
            name: '应收金额',
            stack: 'Total',
            type: 'line',
            data: this.amountTotal,         //传入应收金额
          },
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart"));// 图标初始化
      console.log(option);
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEcharts1(){
      const option = {

        title: {
          text: '实际收费项目TOP5',
          left: 'center',  // 标题水平居中
          top: 'top',      // 标题与容器顶部对齐
          textStyle: {
            color: '#333',   // 文本颜色
            fontWeight: 'normal',  // 文本粗细
            fontSize: 18     // 文本字号
          },
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          top: '30px',
          left: 'center'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: '#fff',
              borderWidth: 2
            },
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              { value: this.chargeAmountPaid[0], name: this.projectName[0] },
              { value: this.chargeAmountPaid[1], name: this.projectName[1] },
              { value: this.chargeAmountPaid[2], name: this.projectName[2] },
              { value: this.chargeAmountPaid[3], name: this.projectName[3] },
              { value: this.chargeAmountPaid[4], name: this.projectName[4] },
            ]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart1"));// 图标初始化
      console.log(option);
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initEcharts2(){
      const option = {
        title: {
          text: '预计收费项目TOP5',
          left: 'center',  // 标题水平居中
          top: 'top',      // 标题与容器顶部对齐
          textStyle: {
            color: '#333',   // 文本颜色
            fontWeight: 'normal',  // 文本粗细
            fontSize: 18     // 文本字号
          },
        },
        legend: {
          top: '30px'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [50, 150],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: this.chargeAmountTotal[0], name: this.projectName[0] },
              { value: this.chargeAmountTotal[1], name: this.projectName[1] },
              { value: this.chargeAmountTotal[2], name: this.projectName[2] },
              { value: this.chargeAmountTotal[3], name: this.projectName[3] },
              { value: this.chargeAmountTotal[4], name: this.projectName[4] },
            ]
          }
        ]
      };
      const myChart = echarts.init(document.getElementById("mychart2"));// 图标初始化
      console.log(option);
      myChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
  mounted() {
    this.loadChargeDetails();
    this.loadComplaint();
    this.loadRepair();
    this.loadActivity();
    this.loadPeopleCount();
    this.loadParkingCount();
    this.loadHouseholdsCount();
    this.loadBuildingCount();
    this.loadCommunityList();
    this.loadAmountList();
  }
}
</script>

